<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const route = useRouter()
const dirList = ref<string[]>([
  '量房资料',
  '平面图',
  '施工图',
  '效果图',
  '合同',
  '预算',
  '赠品',
  '主材确认单',
  '增减项单',
  '一表通',
  '其他',
])
const handleProjectFile = (name: string) => {
  window.api.closeWindow('projectFile', 'destroy')
  window.api.openWindow('projectFile', { title: name, work_id: route.currentRoute.value.query.work_id })
}
</script>

<template>
  <main
    class="bg-white py-4 px-3 gap-2 relative rounded-md overflow-hidden nodrag"
    style="height: -webkit-fill-available">
    <div class="grid gap-x-5 md:grid-cols-6 xl:grid-cols-7">
      <div
        class="flex flex-col items-center justify-center gap-4 py-6 overflow-hidden hover:bg-[#f5f5f5] hover:rounded-md"
        v-for="(item, index) in dirList"
        :key="index"
        @click="handleProjectFile(item)">
        <img src="@renderer/public/fileDir.jpg" class="w-[122px] h-[98px]" />
        <span class="text-black text-base one-line">{{ item }}</span>
      </div>
    </div>
  </main>
</template>
<style lang="scss" scoped>
.el-form {
  display: flex;
}
.el-form-item {
  margin-bottom: 0px;
  margin-right: 0px !important;
  flex: 1;
}
</style>
